import { Button, Space, Dropdown } from "antd"
import type { MenuProps } from 'antd';
import {DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons'
import { useThemeConf } from '@/stores/themeConf'
import { useGlobalConf } from "@/stores/globalConf";
export default function Header() {
  const {changeTheme, themeState} = useThemeConf()
  const items: MenuProps['items'] = [
    { label: '明亮', key: 'light', },
    { label: '暗黑', key: 'dark', },
    { label: '系统', key: 'system', },
  ]
  function doClick(e:any){
    changeTheme(e.key)
  }
  const menuProps = {
    items,
    onClick: doClick,
  };
  const {toggleMenuCollapsed,menuCollapsed} = useGlobalConf()
  return (
    <header className="flex justify-between items-center px-4 py-2"> 
      <Space>
        <Button type="text" size="large" onClick={()=> toggleMenuCollapsed()}>
          {menuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
        header
      </Space>
      <Space>
        <Dropdown.Button
          icon={<DownOutlined />}
          menu={menuProps}
        >
          {themeState}
        </Dropdown.Button>
      </Space>

    </header>
  )
}